<template>
    <div class="pt50 pl29 fs14 lh30 c333 pr43">
        <div class="w300 media_w100p">
            <p class="pl11 lh50">您的姓名</p>
            <input type="text" v-model="username" class="pl11 pr10 bgf5 lh35 boradius1 w100p" placeholder="请输入您的姓名" @keyup.enter="addIdea">
            <p class="pl11 lh50 pt4">您的电话</p>
            <input type="tel" v-model="tel" class="pl11 pr10 lh35 lh40 boradius1 w100p bgf5 phoneinput" placeholder="请输入您的电话"  @keyup.enter="addIdea">
            <p class="pl11 lh50 pt4">意见或建议</p>
            <textarea name="" id="" class="w100p p11 fs14 bgf5 h110 boradius1 h100 c333" v-model="text" placeholder="在此输入意见或建议内容" @keyup.enter="addIdea"></textarea>
            <button class="w100p boradius1 bgred textc lh35 cfff mt23 curpointer media_lh60px media_fs22px" @click="addIdea">提交</button>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Idea",
        data(){
            return{
                username:'',
                tel:'',
                text:''
            }
        },
        mounted(){
            var v = this , ele = null;
            ele = document.getElementsByClassName('phoneinput')[0];
            ele.addEventListener('paste', function (event) {
                // 输入框类型
                var type = this.getAttribute('type') || this.type;
                // 剪切板数据对象
                var clipboardData = event.clipboardData || window.clipboardData;
                // 粘贴内容
                var paste = '';
                // 剪切板对象可以获取
                if (!clipboardData) {
                    return;
                }
                // 获取选中的文本内容
                var userSelection, textSelected = '';
                if (window.getSelection) {
                    // 现代浏览器
                    // 直接window.getSelection().toString()对于IE的输入框无效
                    textSelected = this.value.slice(ele.selectionStart, ele.selectionEnd);
                } else if (document.selection) {
                    // 旧IE浏览器
                    textSelected = document.selection.createRange().text;
                }
                // 只有输入框没有数据，或全选状态才处理
                if (this.value.trim() == '' || textSelected === this.value) {
                    // 阻止冒泡和默认粘贴行为
                    event.preventDefault();
                    event.stopPropagation();
                    // 获取粘贴数据
                    paste = clipboardData.getData('text') || '';
                    // 进行如下处理
                    // 除非是password，其他都过滤前后空格
                    // 邮箱处理，可能会使用#代替@避免被爬虫抓取
                    paste = paste.replace(/^\+86/, '');
                    // 如果此时剩余所有数字正好11位
                    if (paste.match(/\d/) && paste.match(/\d/g).length == 11) {
                        paste = paste.replace(/\D/g, '');
                    }
                    v.tel = paste;
                    // 插入
                    this.value = paste;
                }
            });
        },
        methods:{
            addIdea(){
                var v = this;
                this.$addIdea(this.username,this.tel,this.text,function () {
                    v.tel = '';
                    v.username = '';
                    v.text = '';
                },function () {
                    v.$emit('tologin')
                });
            }
        }
    }
</script>

<style>

</style>




















